From c2b4891854e938b47c857f134598bb96e845e112 Mon Sep 17 00:00:00 2001 From: =?utf8?q?=D0=A0=D1=83=D1=81=D0=BB=D0=B0=D0=BD=20=D0=98=D0=B6=D0=B1?= =?utf8?q?=D1=83=D0=BB=D0=B0=D1=82=D0=BE=D0=B2?= Date: Fri, 28 Mar 2014 00:27:04 +0000 Subject: [PATCH] W32: Add MSW7 notebook theme, move old notebook theme into XP-only CSS https://bugzilla.gnome.org/show_bug.cgi?id=727213 --- gtk/resources/theme/gtk-win32-base.css | 44 ----- gtk/resources/theme/gtk-win32-xp.css | 43 +++++ gtk/resources/theme/gtk-win32.css | 235 +++++++++++++++++++++++++ 3 files changed, 278 insertions(+), 44 deletions(-) diff --git a/gtk/resources/theme/gtk-win32-base.css b/gtk/resources/theme/gtk-win32-base.css index 1855bfe9dc..d621178fbf 100644 --- a/gtk/resources/theme/gtk-win32-base.css +++ b/gtk/resources/theme/gtk-win32-base.css @@ -804,50 +804,6 @@ GtkComboBox GtkArrow:insensitive { color: rgba(255, 0, 0, 0); } - -/* Notebook */ - -.notebook { - background-color: #ffffff; - border-width: 1px 1px 1px 1px; - border-style: solid; - background-origin: padding-box; - background-clip: border-box; - background-image: -gtk-win32-theme-part(tab, 9 1, margins(-1 -3 -2 -1)); - border-image: -gtk-win32-theme-part(tab, 9 1, margins(0 -2 -1 0)) 1 1 1 1 repeat; - -GtkNotebook-tab-overlap: 1; - -GtkNotebook-tab-curvature: 0; -} - -.notebook tab { - border-width: 0; - background-image: -gtk-win32-theme-part(tab, 1 1); - padding: 0px 4px 0px 4px; -} - -.notebook tab.left, .notebook tab.right { - padding: 4px 0px 4px 0px; -} - -.notebook tab:active { - background-image: -gtk-win32-theme-part(tab, 1 3, margins(0 0 -1 0)); -} -.notebook tab:active.top { - padding: 2px 4px 1px 4px; -} - -.notebook tab:active.bottom { - padding: 1px 4px 2px 4px; -} - -.notebook tab:active.right { - padding: 4px 4px 4px 1px; -} - -.notebook tab:active.left { - padding: 4px 1px 4px 4px; -} - /* Toolbar */ .toolbar { diff --git a/gtk/resources/theme/gtk-win32-xp.css b/gtk/resources/theme/gtk-win32-xp.css index c1788a22b0..ff61e9d97e 100644 --- a/gtk/resources/theme/gtk-win32-xp.css +++ b/gtk/resources/theme/gtk-win32-xp.css @@ -80,3 +80,46 @@ GtkProgressBar.progressbar { border-style: solid; border-color: transparent; } + +/* Notebook */ + +.notebook { + background-color: #ffffff; + border-width: 1px 1px 1px 1px; + border-style: solid; + background-origin: padding-box; + background-clip: border-box; + background-image: -gtk-win32-theme-part(tab, 9 1, margins(-1 -3 -2 -1)); + border-image: -gtk-win32-theme-part(tab, 9 1, margins(0 -2 -1 0)) 1 1 1 1 repeat; + -GtkNotebook-tab-overlap: 1; + -GtkNotebook-tab-curvature: 0; +} + +.notebook tab { + border-width: 0; + background-image: -gtk-win32-theme-part(tab, 1 1); + padding: 0px 4px 0px 4px; +} + +.notebook tab.left, .notebook tab.right { + padding: 4px 0px 4px 0px; +} + +.notebook tab:active { + background-image: -gtk-win32-theme-part(tab, 1 3, margins(0 0 -1 0)); +} +.notebook tab:active.top { + padding: 2px 4px 1px 4px; +} + +.notebook tab:active.bottom { + padding: 1px 4px 2px 4px; +} + +.notebook tab:active.right { + padding: 4px 4px 4px 1px; +} + +.notebook tab:active.left { + padding: 4px 1px 4px 4px; +} diff --git a/gtk/resources/theme/gtk-win32.css b/gtk/resources/theme/gtk-win32.css index f8d774fcce..f812e4dc66 100644 --- a/gtk/resources/theme/gtk-win32.css +++ b/gtk/resources/theme/gtk-win32.css @@ -82,3 +82,238 @@ background-image: -gtk-win32-theme-part(menu, 11 2); border-width: 0; } + +/* Notebook */ +.notebook { + /* This prevents a thin half-transparent line between the pane and the tab */ + background-color: -gtk-win32-color(tab, 5); + + border-width: 1px 1px 1px 1px; + border-style: solid; + background-origin: padding-box; + background-clip: border-box; + + /* W32 theme draws it with borders and all, cut them away */ + background-image: -gtk-win32-theme-part(tab, 9 1, margins(-1 -3 -2 -1)); + + /* Grab the borders now and duplicate them across the perimeter */ + border-image: -gtk-win32-theme-part(tab, 9 1, margins(0 -2 -1 0)) 1 1 1 1 repeat; + /* MSW7 themes draw tab overlaps differently. Net result is: + * inactive tab text never moves no matter which tabs get to be active + * active tab text moves only up + * active tab steals space from its neighbors (overlapping their borders without moving them) + * inactive tab does not steal any space from its neighbors (prelight makes that obvious - one tab's borders light up, its neighbors' don't change) + * first(last in RTL?) tab has extra gap that disappears (due to overlapping) when this tab activates + This can't be emulated in GTK, so we won't even try. + */ + -GtkNotebook-tab-overlap: 0; + -GtkNotebook-tab-curvature: 0; +} + +.notebook tab { + /* Make sure parts not covered by the background are transparent */ + background-color: transparent; + + /* Use GTK border, since we can control where it's drawn (unlike built-in theme border, which is always left-top-right) */ + border-width: 1px; + border-style: solid; + border-color: rgb(137, 140, 149); + + /* Sadly, GTK CSS can't rotate images, which means that we can't use tabs from the theme */ + background-image: none; + /* Don't use border image either, since it has no bottom border */ + border-image: none; + + /* By default tabs are large enough for their labels, give them more space */ + padding: 2px; +} + +/* W32 has no concept of notebook header (the rectangle where tabs are - including the area where tabs could be, if you add more of them), make it disappear */ +.notebook.header { + background-color: transparent; + background-image: none; + border-width: 0px; + border-color: transparent; +} + +/* Draw everything ourselves. Default MSW7 theme for a top tab (the only kind of tab available) is: + 1-px grey border + extra 1-px inside white borders to the left and the right + top 8 pixels of the tab are light grey gradient (from 95% to 92% here) + rest of the tab is dark grey gradient (quick 3-pixel fall from 87% to 85%, then uniform until half the way, then drops to 84%, last 4 pixels fall down to 81%) + + Prelight tab is the same as normal, but with light blue instead of grey. + Active tabs (prelight ot not) are simple white. + Disabled tabs are simple dark grey. + There's also theme part for "focused" tab (simple pale blue), but it is unclear in which circumstances it's used. + + Normal and selected tab borders are grey. + Prelight tab borders are blue. + Disabled tab borders are darker grey. + */ +.notebook tab.top { + background-image: -gtk-gradient (linear, + 0 0, 0 1, + color-stop(0, rgb(242, 242, 242)), + color-stop(0.2, rgb(235, 235, 235)), + color-stop(0.21, rgb(221, 221, 221)), + color-stop(0.22, rgb(216, 216, 216)), + color-stop(0.6, rgb(214, 214, 214)), + color-stop(0.9, rgb(214, 214, 214)), + color-stop(1, rgb(207, 207, 207))); + box-shadow: inset -1px 0px 0px white, inset 1px 0px 0px white; + /* Tab border is 1px (see above), override bottom border (for top tabs) to be 0px */ + border-bottom: 0px; +} + +.notebook tab.top:prelight { + background-image: -gtk-gradient (linear, + 0 0, 0 1, + color-stop(0, rgb(234, 246, 253)), + color-stop(0.2, rgb(217, 240, 252)), + color-stop(0.21, rgb(190, 230, 253)), + color-stop(0.22, rgb(181, 226, 250)), + color-stop(0.6, rgb(178, 224, 249)), + color-stop(0.9, rgb(175, 222, 248)), + color-stop(1, rgb(167, 217, 245))); +} + +.notebook tab.left { + background-image: -gtk-gradient (linear, + 0 0, 1 0, + color-stop(0, rgb(242, 242, 242)), + color-stop(0.2, rgb(235, 235, 235)), + color-stop(0.21, rgb(221, 221, 221)), + color-stop(0.22, rgb(216, 216, 216)), + color-stop(0.6, rgb(214, 214, 214)), + color-stop(0.9, rgb(214, 214, 214)), + color-stop(1, rgb(207, 207, 207))); + + box-shadow: inset 0px -1px 0px white, inset 0px 1px 0px white; + /* Tab border is 1px (see above), override right border (for left tabs) to be 0px */ + border-right: 0px; +} + +.notebook tab.left:prelight { + background-image: -gtk-gradient (linear, + 0 0, 1 0, + color-stop(0, rgb(234, 246, 253)), + color-stop(0.2, rgb(217, 240, 252)), + color-stop(0.21, rgb(190, 230, 253)), + color-stop(0.22, rgb(181, 226, 250)), + color-stop(0.6, rgb(178, 224, 249)), + color-stop(0.9, rgb(175, 222, 248)), + color-stop(1, rgb(167, 217, 245))); +} + +.notebook tab.right { + background-image: -gtk-gradient (linear, + 1 0, 0 0, + color-stop(0, rgb(242, 242, 242)), + color-stop(0.2, rgb(235, 235, 235)), + color-stop(0.21, rgb(221, 221, 221)), + color-stop(0.22, rgb(216, 216, 216)), + color-stop(0.6, rgb(214, 214, 214)), + color-stop(0.9, rgb(214, 214, 214)), + color-stop(1, rgb(207, 207, 207))); + + box-shadow: inset 0px 1px 0px white, inset 0px -1px 0px white; + /* Tab border is 1px (see above), override left border (for right tabs) to be 0px */ + border-left: 0px; +} + +.notebook tab.right:prelight { + background-image: -gtk-gradient (linear, + 1 0, 0 0, + color-stop(0, rgb(234, 246, 253)), + color-stop(0.2, rgb(217, 240, 252)), + color-stop(0.21, rgb(190, 230, 253)), + color-stop(0.22, rgb(181, 226, 250)), + color-stop(0.6, rgb(178, 224, 249)), + color-stop(0.9, rgb(175, 222, 248)), + color-stop(1, rgb(167, 217, 245))); +} + +.notebook tab.bottom { + background-image: -gtk-gradient (linear, + 0 1, 0 0, + color-stop(0, rgb(242, 242, 242)), + color-stop(0.2, rgb(235, 235, 235)), + color-stop(0.21, rgb(221, 221, 221)), + color-stop(0.22, rgb(216, 216, 216)), + color-stop(0.6, rgb(214, 214, 214)), + color-stop(0.9, rgb(214, 214, 214)), + color-stop(1, rgb(207, 207, 207))); + box-shadow: inset -1px 0px 0px white, inset 1px 0px 0px white; + /* Tab border is 1px (see above), override top border (for bottom tabs) to be 0px */ + border-top: 0px; +} + +.notebook tab.bottom:prelight { + background-image: -gtk-gradient (linear, + 0 1, 0 0, + color-stop(0, rgb(234, 246, 253)), + color-stop(0.2, rgb(217, 240, 252)), + color-stop(0.21, rgb(190, 230, 253)), + color-stop(0.22, rgb(181, 226, 250)), + color-stop(0.6, rgb(178, 224, 249)), + color-stop(0.9, rgb(175, 222, 248)), + color-stop(1, rgb(167, 217, 245))); +} + +.notebook tab:active, +.notebook tab:active:prelight, +.notebook tab.right:active, +.notebook tab.right:active:prelight, +.notebook tab.bottom:active, +.notebook tab.bottom:active:prelight, +.notebook tab.left:active, +.notebook tab.left:active:prelight +{ + /* active tabs are pure white with grey borders, and prelight changes nothing */ + background-image: none; + background-color: white; + border-color: rgb(137, 140, 149); +} + +.notebook tab:insensitive, +.notebook tab:insensitive, +.notebook tab.right:insensitive, +.notebook tab.bottom:insensitive, +.notebook tab.left:insensitive +{ + /* insensitive tabs are dark grey white with even darker grey borders */ + background-image: none; + background-color: rgb(201, 202, 203); + border-color: rgb(128, 128, 128); +} + +.notebook tab:prelight, +.notebook tab.right:prelight, +.notebook tab.bottom:prelight, +.notebook tab.left:prelight +{ + /* prelight tabs have blue borders */ + border-color: rgb(60, 127, 177); +} + + +.notebook tab.top:active { + /* Make active tab "stick out" up by padding it more at the bottom */ + padding-bottom: 4px; +} + +.notebook tab.right:active { + /* Make active tab "stick out" right by padding it more at the left */ + padding-left: 4px; +} + +.notebook tab.bottom:active { + /* Make active tab "stick out" down by padding it more at the top */ + padding-top: 4px; +} + +.notebook tab.left:active { + /* Make active tab "stick out" left by padding it more at the right */ + padding-right: 4px; +} -- 2.30.2